import { nanoid } from 'nanoid';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.css';
import { useState } from 'react';
import PItem from '../c-pitem';
// 样式
import './index-module.css';
// 图片
import ImgPrize from '../images/prize.png';
import ry from '../images/ry.png';
import dz from '../images/dz.png';
import kp from '../images/kp.png';
import qm from '../images/qm.png';
import cq from '../images/cq.png';
const gt = [
  {
    id: nanoid(),
    url: { ry },
    title: '王者荣耀',
    num: 1,
  },
  {
    id: nanoid(),
    url: { kp },
    title: '天天酷跑',
    num: 12,
  },
  {
    id: nanoid(),
    url: { qm },
    title: '全民突击',
    num: 5,
  },
  {
    id: nanoid(),
    url: { cq },
    title: '热血传奇',
    num: 2,
  },
  {
    id: nanoid(),
    url: { ry },
    title: '王者荣耀',
    num: 1,
  },
];
const CPrize = () => {
  const [game, setGame] = useState(gt);
  return (
    <div className="p-container">
      <div className="p-title">
        <img src={ImgPrize} alt="" />
        <span>礼包公告</span>
      </div>
      <div className="p-content">
        <Swiper
          spaceBetween={50}
          slidesPerView={3}
          initialSlide={1} // 初始化显示哪一个
          loop={true} // 是否循环
          onSlideChange={() => console.log('slide change')}
          onSwiper={(swiper) => console.log(swiper)}
          threshold={40}
        >
          {game.map((item, index) => {
            return (
              <SwiperSlide>
                <PItem sendItem={{ item }} key={item.id}></PItem>
              </SwiperSlide>
            );
          })}
        </Swiper>

        <PItem></PItem>
      </div>
    </div>
  );
};
export default CPrize;
